<template>
  <div>
    <!-- 
        - 全局定义字母都大写的过滤器
        - 局部定义字符串翻转的过滤器
     -->
    <!-- 
         全局过滤器
        Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) 
     -->

    <h3>原来的样子: {{ msg }}</h3>
    <!-- 过滤器用法: {{ 数据 | 过滤器 }}  -->
    <h3>翻转 {{ msg | fz }}</h3>

    <h3>{{ msg | toUp }}</h3>
    <h3>{{ msg | toUp | fz }}</h3>
    <h3>{{ msg | fz("|") }}</h3>
    <h3>{{ msg | toUp | fz("|") }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
    };
  },

  //   局部过滤器
  // filters: {过滤器名字: (值) => {return "返回处理后的值"}
  //   filters: {
  //     toUp(val) {
  //       return val.toUpperCase();
  //     },
  //   },
  filters: {
    toUp: (val) => val.toUpperCase(),
  },
};
</script>

<style>
</style>